<template>
  <div>
    <ul class="ul">
      <li class="li" :class="{'icon-user':user, 'icon-user-act':!user}">
        <div @click="navigationA" :class="{edgeA}">
          <span>标签类型</span>
          <i class="float" :class="{ 'el-icon-arrow-up' : isC, 'el-icon-arrow-down': !isC}"></i>
        </div>
        <ul v-show="navigation1" class="deviant">
          <li class="li">
            <router-link class="router" to="">
              <div>Academic</div>
            </router-link>
          </li>
          <li class="li">
            <router-link class="router" to="">
              <div>Product </div>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: true,
        edgeA: false,
        navigation1: false,
        isC: false,
      }
    },
    methods: {
      showToggle() {
        this.isShow = !this.isShow;
        this.isA = !this.isA;
      },
      showToggle1() {
        this.isShow1 = !this.isShow1;
        this.isB = !this.isB;
      },

      navigationA() {
        this.navigation1 = !this.navigation1;
        this.isC = !this.isC;
        this.edgeA = !this.edgeA;
        this.user = !this.user;
      }
    }
  }
</script>

<style scoped>
  @import '../../../../assets/index.css';
  .li {
    list-style: none;
    margin: 0;
    padding-left: 30px;
    padding-bottom: 10px;
  }
  .ul > .li > div {
    font-size: 15px;
    color: #fff;
    padding: 0 30px 10px 0;
  }
  /*点击样式*/
  .edgeA {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeB {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeC {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeD {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .edgeE {
    border-right: 3px solid #1f9e91;
    color: #1f9e91 !important;
  }
  .float {
    float: right;
  }
  .deviant {
    margin: 0 0 0 -30px
  }
  .router {
    text-decoration: none;
  }
  .router > div {
    font-size: 17px;
    color: #fff;
    padding: 5px 0;
  }

</style>
